<template>
	<div class="card table-search bg-white" v-if="columns.length">
		<el-form ref="formRef" :model="searchParam" @submit.prevent="search" @keyup.enter="search">
			<Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol" style="display: inline-flex; flex-flow: wrap">
				<template v-for="(item, index) in columns" :key="item.prop">
					<GridItem v-if="item.search?.el" v-bind="getResponsive(item)" :index="index">
						<el-form-item :label="`${item.label} :`">
							<SearchFormItem :column="item" :searchParam="searchParam" :style="{ width: item.search?.width || '150px' }" />
						</el-form-item>
					</GridItem>
				</template>
				<slot />
				<GridItem>
					<div class="operation">
						<el-button type="primary" class="iconfont iconsearch" @click="search">{{ $t("common.btn.search") }}</el-button>
						<el-button class="iconfont iconrefresh-ccw" @click="reset">{{ $t("common.btn.reset") }}</el-button>
						<el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
							{{ collapsed ? "展开" : "收起" }}
							<span :class="showCollapse ? 'iconfont iconchevron-down' : 'iconfont iconchevron-up'"></span>
						</el-button>
					</div>
				</GridItem>
			</Grid>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Grid/interface";
import SearchFormItem from "./components/SearchFormItem.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";

interface ProTableProps {
	columns?: ColumnProps[]; // 搜索配置列
	searchParam?: { [key: string]: any }; // 搜索参数
	searchCol: number | Record<BreakPoint, number>;
	search: (params: any) => void; // 搜索方法
	reset: (params: any) => void; // 重置方法
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
	columns: () => [],
	searchParam: () => ({})
});

// 获取响应式设置
const getResponsive = (item: ColumnProps) => {
	return {
		span: item.search?.span,
		offset: item.search?.offset ?? 0,
		xs: item.search?.xs,
		sm: item.search?.sm,
		md: item.search?.md,
		lg: item.search?.lg,
		xl: item.search?.xl
	};
};

// 是否默认折叠搜索项
const collapsed = ref(true);

// 获取响应式断点
const gridRef = ref();
const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);

const emit = defineEmits(["changeCollapsed"]);
watch(
	() => collapsed.value,
	nval => {
		emit("changeCollapsed", nval);
	}
);
// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
	let show = false;
	props.columns.reduce((prev, current) => {
		prev +=
			(current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
			(current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);

		if (typeof props.searchCol !== "number") {
			if (prev > props.searchCol[breakPoint.value]) show = true;
		} else {
			if (prev > props.searchCol) show = true;
		}
		return prev;
	}, 0);
	return show;
});
</script>
